import { Component, useState } from 'react'
import { Button, Input } from 'antd'
import SearchInput from '@/components/SearchInput'
import SearchInputWrapper from '@/components/SearchInput/HOCInput'


class SearchBar extends Component<any, any> {

  wrapperInput;
  constructor(props:any) {
     super(props)
     this.wrapperInput = SearchInputWrapper(<Input />)
     console.log('this.WrapperInput:', this.wrapperInput)
  }

  render() {
    return <div>
      <this.wrapperInput />
    </div>
  }
}

// const SearchBar = () => {

//   const [ formData, setFormData ] = useState<{}>({})

//   const WrapperInput = SearchInputWrapper(<Input />)

//   const handleA = (val: string) => {
//     console.log('valA:', val)
//     setFormData({...formData, A: val})
//   }
//   const handleB = (val: string) => {
//     console.log('valB:', val)
//     setFormData({...formData, B: val})
//   }
//   const handleC = (val: string) => {
//     console.log('valC:', val)
//     setFormData({...formData, C: val})
//   }
//   const handleD = (val: string) => {
//     console.log('valE', val)
//     setFormData({...formData, D: val})
//   }

//   return <div>

//     SearchBar

//      <WrapperInput />


//     <SearchInput getResultValue={handleA}/>
//     <SearchInput getResultValue={handleB}/>
//     <SearchInput getResultValue={handleC}/>
//     <SearchInput getResultValue={handleD}/>

//     <Button onClick={() => {
//        console.log("formData:", formData)
//     }}>搜索</Button>
//   </div>
// }

export default SearchBar;
